<template>
  <div class="tips-container">
    <div>
      <TitleView title="烹饪技巧" />
    </div>
    <el-row>
      <el-col :span="24" v-for="(tip, index) in tips" :key="index">
        <el-card class="tip-card" @click="handleClick(tip)">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-image
                  :src="tip.imageUrl"
                  class="tip-image"
                  :fit="'cover'"
              />
            </el-col>
            <el-col :span="18">
              <div class="tip-content">
                <div style="font-size: 18px; font-weight: bold">{{ tip.title }}</div>
                <p>{{ tip.description }}</p>
                <div class="tip-meta">
                  <span>{{ tip.createTime }}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import TitleView from "@/components/TitleView.vue";
import {getFoodArticleByBankuai} from "@/api/food.js";
import router from "@/router/index.js";

const tips = ref([
  {
    title: '炒苦瓜这样炒不苦又好吃',
    image: 'https://www.meishizaixian.cn/data/attachment/portal/202410/31/143141h7db6p36y35mnjj8.webp.thumb.jpg',
    description: '炒苦瓜不仅夏季，秋冬季也可炒盘降燥清火。然而，苦瓜特有的苦涩味往往让许多人望而却步。那么，怎样才能炒出既不苦又好吃的苦瓜呢？下面分享从选材、处理、烹饪技巧及调味等多个方面，为您详细解析这一烹饪难题。',
    date: '2024-10-31 14:32',
  },
  {
    title: '油焖大虾常做法的技巧',
    image: 'https://www.meishizaixian.cn/data/attachment/portal/202410/31/142227qp9rervypvfityzx.webp.thumb.jpg',
    description: '油焖大虾作为一道广受欢迎的家常菜，不仅色泽诱人，味道鲜美，而且营养丰富，深受食客们的喜爱。下面，我们就来详细介绍一下制作油焖大虾的步骤，让您在家也能轻松做出这道美味佳肴。首先，准备好所需的食材。',
    date: '2024-10-31 14:23',
  },
  {
    title: '红烧肉软嫩入口即化的技巧',
    image: 'https://www.meishizaixian.cn/data/attachment/portal/202408/06/211704h8ij4fzrl85l0wr5.jpg.thumb.jpg',
    description: '红烧肉是一道中国家常菜中的经典，以其醇厚的口味和入口即化的口感深受人们的喜爱。在团圆或庆祝的餐桌上，红烧肉往往是必不可少的一道菜。以下将介绍红烧肉的两种家常做法，帮助你掌握制作这道菜的技巧，使肉质更加软糯，入口即化。',
    date: '2024-08-06 21:18',
  },
]);

onMounted(() => {
  getFoodArticleByBankuaiHandler();
});

const getFoodArticleByBankuaiHandler = () => {
  getFoodArticleByBankuai("烹饪技巧").then(result => {
    tips.value = result.data;
  });
};

const handleClick = (tip) => {
  router.push({ name: 'article', params: { id: tip.id } })
};
</script>

<style scoped>
.tips-container {
  max-width: 1000px; /* 设置最大宽度 */
  margin: auto;      /* 自动水平居中 */
}

.refresh-button {
  margin-bottom: 20px; /* 按钮与内容之间的间距 */
}

.tip-image {
  width: 100%; /* 图片宽度 100% */
  height: 150px; /* 固定高度 */
}

.tip-content {
  padding-bottom: 10px;
  padding-right: 10px;
}

.tip-meta {
  font-size: 12px; /* 日期字体大小 */
  color: #999;     /* 日期颜色 */
}
</style>
